<template>
  <div>
    <div v-if="showcolla===6">
      <el-card style="margin:30px">
        <el-collapse v-model="activeNames">
          <el-collapse-item title="基础信息" name="1">
            <div class="stepfather">
              <el-steps :active="active" finish-status="success" style="width:55%;">
                <el-step title="新建" :description="timeArray[0]" />
                <el-step title="取消" :description="timeArray[1]" />
              </el-steps>
            </div>
            <div class="baseinfo">
              <el-row style="height: 46px;">
                <el-col :span="6">
                  <p>盘点单号</p>
                  <p>{{ resdata.code }}</p>
                </el-col>
                <el-col :span="6">
                  <p>创建时间</p>
                  <p>{{ resdata.createTime }}</p>
                </el-col>
                <el-col :span="6">
                  <p>计划盘点时间</p>
                  <p>{{ resdata.code }}</p>
                </el-col>
                <el-col :span="6">
                  <p>盘点原因</p>
                  <p>{{ resdata.reason }}</p>
                </el-col>
              </el-row>
              <el-row style="height: 46px;">
                <el-col :span="6">
                  <p>盘点维度</p>
                  <p>{{ resdata.dimension }}</p>
                </el-col>
                <el-col :span="6">
                  <p>盘点类型</p>
                  <p>{{ resdata.type }}</p>
                </el-col>
                <el-col :span="6">
                  <p>盘点仓库</p>
                  <p>{{ resdata.warehouseName }}</p>
                </el-col>
                <el-col :span="6">
                  <p>盘点库区</p>
                  <p>{{ resdata.areaName }}</p>
                </el-col>
              </el-row>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-card>
    </div>
    <div v-else>
      <el-card style="margin:30px">
        <el-collapse v-model="activeNames">
          <el-collapse-item title="基础信息" name="1">
            <div class="stepfather">
              <el-steps :active="active" finish-status="success" style="width:55%;">
                <el-step title="新建" :description="timeArray[0]" />
                <el-step title="一盘中" :description="timeArray[1]" />
                <el-step title="一盘完成" :description="timeArray[2]" />
                <el-step title="复盘中" :description="timeArray[3]" />
                <el-step title="复盘完成" :description="timeArray[4]" />
              </el-steps>
            </div>
            <div class="baseinfo">
              <el-row style="height: 46px;">
                <el-col :span="6">
                  <p>盘点单号</p>
                  <p>{{ resdata.code }}</p>
                </el-col>
                <el-col :span="6">
                  <p>创建时间</p>
                  <p>{{ resdata.createTime }}</p>
                </el-col>
                <el-col :span="6">
                  <p>计划盘点时间</p>
                  <p>{{ resdata.code }}</p>
                </el-col>
                <el-col :span="6">
                  <p>盘点原因</p>
                  <p>{{ resdata.reason }}</p>
                </el-col>
              </el-row>
              <el-row style="height: 46px;">
                <el-col :span="6">
                  <p>盘点维度</p>
                  <p>{{ resdata.dimension }}</p>
                </el-col>
                <el-col :span="6">
                  <p>盘点类型</p>
                  <p>{{ resdata.type }}</p>
                </el-col>
                <el-col :span="6">
                  <p>盘点仓库</p>
                  <p>{{ resdata.warehouseName }}</p>
                </el-col>
                <el-col :span="6">
                  <p>盘点库区</p>
                  <p>{{ resdata.areaName }}</p>
                </el-col>
              </el-row>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-card>
      <el-card style="margin:30px">
        <el-collapse>
          <el-collapse-item title="盘点清单">
            <div class="PDlist">
              <div class="top">占位子</div>
              <div>
                <el-table
                  :data="formdata"
                  stripe
                  :header-cell-style="{'text-align':'center'}"
                  :cell-style="{'text-align':'center'}"
                  border
                >
                  <el-table-column
                    prop="date"
                    label="序号"
                    width="70"
                    type="index"
                  />
                  <el-table-column
                    prop="warehouseName"
                    label="仓库名称"
                    width="150"
                  />
                  <el-table-column
                    prop="areaName"
                    label="库区名称"
                    width="150"
                  />
                  <el-table-column
                    prop="locationName"
                    label="库位名称"
                    width="150"
                  />
                  <el-table-column
                    prop="goodsName"
                    label="货品名称"
                    width="150"
                  />
                  <el-table-column
                    prop="goodsCode"
                    label="货品编码"
                    width="150"
                  />
                  <el-table-column
                    prop="goodsBarCode"
                    label="货品条码"
                    width="150"
                  />
                  <el-table-column
                    prop="ownerName"
                    label="货主名称"
                    width="160"
                  />
                  <el-table-column
                    prop="stockNum"
                    label="库存数量"
                    width="164"
                  />
                </el-table>
              </div>
              <div>
                <el-pagination
                  :current-page="pageConfig.current"
                  :page-sizes="[5, 20, 15, 20]"
                  :page-size="5"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="5"
                />
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getdetail, getCheckpage2 } from '@/api/inventory.js'
export default {
  name: 'YuanfengWarehouseTest',

  data() {
    return {
      activeNames: ['1'],
      active: 0,
      resdata: {},
      timeArray: [],
      pageConfig: {
        current: 1,
        size: 10
      },
      total: 0,
      formdata: [],
      // 取消与未取消的展示问题
      showcolla: 0
    }
  },
  async created() {
    // 获取顶部信息
    const id = this.$route.params.id
    const res = (await getdetail(id)).data.data
    // console.log(res)
    this.resdata = res
    this.showcolla = res.status
    // console.log(this.resdata.timeArray[0])
    this.timeArray = res.timeArray
    this.active = this.resdata.timeArray.length
    // 获取中间部分信息
    const result = await getCheckpage2({ ...this.pageConfig, masterId: '801556659531949857', status: '1' })
    // console.log(result)
    this.formdata = result.data.data.records
    // console.log(this.formdata)
  },
  methods: {
    handleChange(val) {
      console.log(val)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-collapse-item__header{
    // border:0px;
}
.stepfather{
    display: flex;
    justify-content: center;
    align-content: center;
}
.baseinfo{
    background-color:#fdfcf9;
    padding:20px 30px 20px 30px;
    // border: 1px solid #f7f2f1
    // box-sizing: content-box;
    p{
        padding: 0;
        margin: 0;
        height: 23px;
        font-size: 13px;
        color:#887e7e;
        line-height: 23px;
    }
}

.PDlist{
    // background-color: pink;
    padding-top: 20px;

    .top{
        margin: 20px 0 20px 0;
        padding: 0 25px 0 25px;
        width: 135px;
        height: 30px;
        background-color: #fff9eb;
        box-sizing: content-box;
        text-align: center;
        line-height: 30px;
        font-size: 13px;
        border: 1px solid #ffb200

    }
}

    ::v-deep .el-table th{
    background-color: #f9f6ee;
    .cell{
        text-align: center;
        font-weight: 400;
        font-size: 13px;
    }
}

</style>
